<template>
    <div class="middle-bg">
        <div class="lj-stat">
            <div v-for="(item,index) in ljList" :key="index" class="lj-row">
                <div class="lj-name">{{item.name}}</div>
                <div class="lj-num">{{item.num}}</div>
            </div>
        </div>
        <div class="map">
            <div id="mapStat">

            </div>
            <div class="map-label">
                <div v-for = "(item,index) in mapList" :key = "index" class="map-position" :class = "`label${index+1}`">
                    <div class="xz-name">{{item.name}}</div>
                    <div class="xz-num">{{item.num}}</div>
                </div>
           

            </div>
        </div>

        <div class="bottom">
            <ul class="bottom-wrapper">
                <li v-for="(item,index) in dpList" @click="handleDpType(item,index)" :key="index" :class="{active:index==currentIndex}" class="dp-handle-row">
                    <div class="icon-row">
                        <img class="icon" v-if="!!item.name" :src="item.icon" alt="">
                        <span v-else>+</span>
                    </div>
                    <div class="circle-row">
                    </div>
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <img class="bottom-bg" src="../../assets/dp1/bottom-bg.png" alt="">
        </div>
    </div>
</template>

<script>
const zhzxIcon = require("../../assets/dp1/zhzx.png");
const djztIcon = require("../../assets/dp1/djzt.png");
const zwztIcon = require("../../assets/dp1/zwzt.png");
const zzztIcon = require("../../assets/dp1/zzzt.png");
const cgztIcon = require("../../assets/dp1/cgzt.png");
import echarts from "echarts";
import "echarts-gl";
const fxMapJson = require("../dp1/ff.json");
import {
    getZhAmount,
    getMapCount,
} from "../../config/api";
import { getMapOption } from "./statConfig";
import {toThousands} from "../../utils";
import Pubsub from "../../utils/pubsub";


export default {
    data() {
        return {
            currentIndex: 2, //大屏专栏操作列表下标
            commonRequest:{},
            dpList: [
                { name: "综合展现", icon: zhzxIcon, type: 1, path: "/dp1" },
                { name: "党建专题", icon: djztIcon, type: 2, path: "/dp2" },
                { name: "政务专题", icon: zwztIcon, type: 3, path: "/dp3" },
                { name: "综治专题", icon: zzztIcon, type: 4, path: "/dp4"  },
                { name: "城管专题", icon: cgztIcon, type: 5 ,path:"/dp5"},
                { name: "", icon: "+", type: 6 }
            ],
            ljList: [
                { name: "累计取号", num: "0" },
                { name: "累计预审", num: "0" },
                { name: "累计受理", num: "0" },
                { name: "累计制证", num: "0" }
            ],
            mapList:[
                {name:"大寺上镇",num:0},
                {name:"辛安镇镇",num:0},
                {name:"天台山镇",num:0},
                {name:"毛演堡镇",num:0},
                {name:"肥乡镇",num:0},
                {name:"旧店乡",num:0},
                {name:"西吕营镇",num:0},
                {name:"元固乡",num:0},
                {name:"东漳堡镇",num:0},
            ],
        };
    },
    mounted() {
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initStat();
        this.initData();
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        /**
         * 初始化数据请求
         */
        initData(){
            this.getZhAmountData();//地图中间综合数量统计
            this.getMapCountData();//地图区域数据

        },
        getMapCountData(){
            getMapCount(this.commonRequest).then((result = {})=>{
                let data = result.data || [];
                this.mapList.map((item,)=>{
                    data.map((sItem)=>{
                        if(item.name == sItem.name){
                            item.num = toThousands(sItem.total);
                        }
                    })
                })
            })
        },
        getZhAmountData(){
            getZhAmount(this.commonRequest).then((result)=>{
                let data = result.data || [];
                this.ljList.map((item,index)=>{
                    item.num = toThousands((data[index] || 0))
                });
            })
        },
        initStat() {
            echarts.registerMap("fxMap", fxMapJson);
            this.myChart1 = echarts.init(document.getElementById("mapStat"));
            this.myChart1.setOption(getMapOption());
        },
        /**
         * dock操作
         */
        handleDpType(item, index) {
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.middle-bg {
    width: 1200px;
    position: relative;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
}
.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1200px;
    position: absolute;
    bottom: 0;
    .bottom-bg {
        // margin-left: 30px;
    }
}
.bottom-wrapper {
    width: 585px;
    height: 55px;
    // margin-left: 30px;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 67px;
}
.dp-handle-row {
    text-align: center;
    color: #abd1ff;
    &.active {
        .circle-row {
            opacity: 1;
        }
        color: #f0f7ff;
    }
    .circle-row {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        margin-bottom: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(
                0deg,
                #0072ff 0%,
                #2a89ff 51%,
                #54a0ff 100%
            ),
            linear-gradient(#bfbfbf, #bfbfbf);
        background-blend-mode: normal, normal;
        box-shadow: 1.5px 2.6px 19px 1px rgba(0, 0, 0, 0.96);
        opacity: 0.4;
    }
}
.icon-row {
    height: 85px;
    width: 85px;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
.icon {
    z-index: 999;
}
.map {
    margin-top: 50px;
    position: relative;
    &-label {
        height: 450px;
        width: 1050px;
        position: absolute;
        top: 0;
    }
    .map-position {
        position: absolute;
        height: 40px;
        width: 60px;
        text-align: center;
        .xz-name {
            color: #00175a;
        }
        .xz-num {
            color: #fbf320;
        }
        &.label1 {
            left: 148px;
            bottom: 130px;
        }
        &.label2 {
            left: 370px;
            bottom: 284px;
        }
        &.label3 {
            left: 340px;
            bottom: 160px;
        }
        &.label4 {
            left: 524px;
            top: 50px;
        }
        &.label5 {
            left: 530px;
            bottom: 248px;
        }
        &.label6 {
            top: 82px;
            right: 244px;
        }
        &.label7 {
            top: 195px;
            right: 250px;
        }
        &.label8 {
            bottom: 110px;
            right: 300px;
        }
        &.label9 {
            top: 138px;
            right: 105px;
        }
    }
}
#mapStat {
    height: 450px;
    width: 1050px;
    // margin-top: 50px;
}
.lj-stat {
    width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
    .lj-row {
        height: 80px;
        width: 159px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url("../../assets/dp3/lj-bg.png");
        margin-right: 40px;
        &:last-child {
            margin-right: 0;
        }
    }
    .lj-name {
        font-size: 16px;
        color: #59ebe8;
    }
    .lj-num {
        font-size: 30px;
        color: #fbf320;
    }
}
</style>